<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var body = document.body;
        body.innerHTML = '<div><button>移动</button></div>';
        var div = document.querySelector('div');
        var btn = document.querySelector('button');
        div.style.width = 100 + 'px';
        div.style.height = 100 + 'px'
        div.style.backgroundColor = 'blue';
        div.style.position = 'absolute';
        div.style.top = 837 + 'px';
        // console.log(body.offsetWidth);
        // var bodyWidth = body.offsetWidth;
        // var bodyHeigt = body.offsetHeight;
        var bodyWidth = window.innerWidth;
        var bodyHeigt = window.innerHeight;
        // btn.style.marginBottom = 600 + 'px';
        // var cHeight = body.clientWidth;
        // var cWhidth = body.clientHeight;
        // console.log(div.clientHeight);
        console.log(bodyWidth);
        console.log(bodyHeigt);
        // console.log(cHeight);
        // console.log(cWhidth);
        // body.style.background = 'red';
        // var divLeft = div.offsetLeft;
        // var divTop = div.offsetTop;
        // console.log(divLeft);
        // console.log(divTop);
        btn.onclick = function() {
            var timer = setInterval(function() {
                if (div.offsetLeft >= bodyWidth - 110) {
                    clearInterval(timer);
                }
                div.style.left = div.offsetLeft + (window.innerWidth / 100) + 'px';
                div.style.top = div.offsetTop - (window.innerHeight / 98) + 'px';
            }, 50);
        }
            // setInterval(function() {
            // },1000)
        // function fn() {
    </script>
</body>
</html>